import * as React from "react";
import * as ReactDOM from "react-dom";

import {OrderModel} from "../../model/OrderModel";
import url, {post} from "../../url";
import {AjaxModel} from "../../model/AjaxModel";
import {checkLoginStatus} from "../../utils";

declare const wx: any;
declare const weui: any;

export interface OrderAllInfoProps {
    item: OrderModel
    onChange: Function
}

export interface State {

}

export default class OrderAllInfo extends React.Component<OrderAllInfoProps, State> {
    //默认属性
    static readonly defaultProps: OrderAllInfoProps = {
        item: null,
        onChange: null

    };

    constructor(props: OrderAllInfoProps) {
        super(props);
        //默认状态
        this.state = {};
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "";

    }

    onDelete = () => {
        post(url.apiOrderDelete, {
            id: this.props.item.id
        }, (res: AjaxModel) => {
            checkLoginStatus(res, () => {
                if (res.code === 200) {
                    location.reload()
                } else {
                    weui.alert(res.msg)
                }
            })
        })
    };

    onConfrim = () => {
        post(url.apiOrderConfrim, {
            id: this.props.item.id
        }, (res: AjaxModel) => {
            checkLoginStatus(res, () => {
                if (res.code === 200) {
                    weui.alert('已确认收货');
                    location.reload();
                } else {
                    weui.alert(res.msg);
                }
            })
        })
    };

    render() {
        return <div className="OrderAllInfo">
            <div className="weui-cells">
                <a className="weui-cell weui-cell_access" href="javascript:;">
                    <div className=" weui-cell__bd weui-cell__bd2">
                        <p>订单号：{this.props.item.ordersn}</p>
                    </div>
                    <div className="weui-cell__ft" onClick={() => {
                        this.props.onChange();
                        // location.hash = `/order-detail/${this.props.item.id}`
                    }}>缩略订单
                    </div>
                </a>
            </div>
            <div className="weui-panel__bd">
                {this.props.item.ogoods.map((item) => {
                    return <a href="javascript:" className="weui-media-box weui-media-box_appmsg">
                        <div className="weui-media-box__hd">
                            <img className="weui-media-box__thumb"
                                 src={item.goods.thumb}/>
                        </div>
                        <div className="weui-media-box__bd">
                            <h4 className="weui-media-box__title">{item.goods.title}</h4>
                            <p className="weui-media-box__desc">￥{item.goods.marketprice}*{item.goods.total}/件,共￥{item.goods.total * item.goods.marketprice}元</p>
                        </div>
                    </a>
                })}
            </div>
            <div className="weui-cells">
                <div className="weui-cell">
                    收件人：
                    {this.props.item.address.realname}
                    {this.props.item.address.mobile}
                    {`${this.props.item.address.province}${this.props.item.address.city}${this.props.item.address.area}${this.props.item.address.address}`}
                </div>
                <div className="weui-cell">
                    <div className="weui-cell__bd">
                        <p>订单金额：{this.props.item.price}</p>
                    </div>
                    <div className="weui-cell__ft">
                        <button className="btn btn-delete" onClick={this.onDelete}>删除</button>
                        <button className="btn btn-confrim" onClick={this.onConfrim}>确认收货</button>
                    </div>
                </div>
            </div>
        </div>
    }
}
